<template>
  <div class="main">
    <div class="search">
      <div class="block">
        广告位置：
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
    </div>
    <div class="buts">
      <el-button type="primary" style="width:120px;" @click="add()" size="small">新增</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="ID" width="60"></el-table-column>
      <el-table-column prop="title" label="标题" sortable width="240"></el-table-column>
      <el-table-column prop="desc" label="描述" width="240"></el-table-column>
      <el-table-column prop="pic" label="封面图" width="240"></el-table-column>
      <el-table-column prop="link" label="跳转链接" width="120"></el-table-column>
      <el-table-column prop="updataTime" label="更新时间" width="160"></el-table-column>
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="primary" size="small">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 模态框 -->
    <div class="shadow-model" v-if="addShow" @click="closeAdd()">
      <div class="el-icon-circle-close close" @click="closeAdd()"></div>
      <div class="add-w" @click="(e)=>{e.stopPropagation()}">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="标题">
            <el-input v-model="form.title" style="width:200px;"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="form.desc" style="width:200px;"></el-input>
          </el-form-item>
          <el-form-item label="跳转地址">
            <el-input v-model="form.desc" style="width:200px;"></el-input>
          </el-form-item>
          <el-form-item label="配图">
            <el-upload action="#" list-type="picture-card" :auto-upload="false">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <i class="el-icon-download"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">修改</el-button>
            <el-button @click="addShow = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      options: [
        {
          value: "1",
          label: "首页顶部左轮播广告位",
        },
        {
          value: "2",
          label: "首页顶部广告位",
        },
        {
          value: "3",
          label: "首页右侧广告位",
        },
        {
          value: "4",
          label: "搜索首页广告位",
        },
        {
          value: "5",
          label: "搜索结果页广告位",
        },
        {
          value: "6",
          label: "标签广告位",
        },
      ],
      value: "",
      tableData: [
        {
          ID: "4096",
          title: "花了320万后，我收获了快手如何10W粉丝月销售500W的秘密",
          desc: "知乎热榜项目案例来啦，欢迎交流合作学习！",
          pic: "a.png",
          link: "/link/a",
          updataTime: "2016-05-02",
        },
      ],
      addShow: false,
      form: {
        name: "",
        address: "",
        date: "",
        delivery: 0,
        type: [],
        resource: "",
      },
      editShow: false,
      editForm: {},
       dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
    };
  },
  methods: {
    add() {
      this.form = ''
      this.addShow = true;
    },
    closeAdd() {
      this.addShow = false;
    },
    onSubmit() {
      this.form.date = this.$moment(this.form.date).format("YYYY-MM-DD");
      this.tableData.push(this.form);
      this.closeAdd();
    },
    save(editForm) {
      this.form.date = this.$moment(this.form.date).format("YYYY-MM-DD");
      console.log(editForm.name);
      this.closeEdit();
    },
    handleClick(row) {
      this.form = row
      this.addShow = true;
    },
    changeType(value) {
      console.log(value);
    },
    change(val) {
      console.log(val);
    },
    //========图片处理start==========
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    }
    //========图片处理end==========
  },
  mounted() {
    console.log("生命周期mounted");
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "../../css/home.scss";
</style>
